<template>
	<div class="demo-image " :class="{hiddenBlack:openMessage}" v-if="allphoto">
		<div class="top" v-if="AblumName">
			<transition name="el-zoom-in-top">
				<ul class="">
					<li><i class="iconfont iconfanhui" @click="back"></i><span class="AblumName">{{AblumName}}</span></li>
				</ul>
			</transition>
		</div>
		<div class="scrollbar size" id="style-2" v-if="allphoto">
			<ul class="block fl clearfix" v-for="(images,index) in allphoto" :key="index">
				<div class="text">{{dateCard(images.time)}}</div>
				<div class="pushFont" v-for="(item,index) in images.photoes">
					<span class="shareSign" v-show="item.isShare" @click="cancelShare()">已分享</span>
					<el-image :src="item.url" :alt="item.pictureId" :key="item.pictureId" :preview-src-list="item.srcList">
						<div slot="placeholder" class="image-slot">
							加载中<span class="dot">...</span>
						</div>
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline"></i>
						</div>
					</el-image>
					<!-- 选择图片 -->
					<span class="iconfont iconchenggong3" @click="choseMany(item.pictureId)" :class="{changeColor:sign(item.pictureId)}"></span>
				</div>

				<i class="iconchenggong iconfont" :class="{changeColor:signAll(images.photoes)}" @click="chooseAll(images.photoes)"></i>
			</ul>
		</div>

		<div class="footer" :class="{eject:Multiple.length !=0}">
			<span class="fl">已选中：{{Multiple.length}} 张照片</span>
			<ul class="topUl">
				<li @click="cancelChose"><i class="iconfont iconquxiao"></i><span class="cancel">取消选择</span></li>
				<li @click="shareImage"><i class="iconfont iconfenxiang"></i><span class="cancel">分享</span></li>
				<li @click="cancelShare"><i class="iconfont iconfenxiang"></i><span class="cancel">取消分享</span></li>
				<li @click="deletes"><i class="iconfont iconhuishouzhan"></i>
					<span class="delete">删除</span></li>
				<li @click="addTo"><i class="iconfont iconadd-fill"><span class="">添加到</span></i></li>
				<li @click="download"><i class="iconfont iconxiazai"></i><span class="download">下载</span></li>
			</ul>
		</div>
		<transition name="el-zoom-in-top">
			<div class="addTo" v-if="openMessage">
				<p>添加照片至</p>
				<i class="iconfont iconquxiao1" @click="addToDown"></i>
				<ul>
					<li @click="addToPrivateAblum()"> <img src="@/assets/pngImg/simi.png" alt=""> <span>私密照片</span></li>
					<li v-for="item in photosortQ" @click="addToAblum(item,solo)"><img :src="item.ablumCoverPath ? $store.state.baseHttp+item.ablumCoverPath : nullImg "
						 alt=""><span>{{item.ablumName}}</span></li>
				</ul>
			</div>
		</transition>
	</div>
</template>

<script>
	import bus from '@/bus/bus.js'
	import nullImg from '@/assets/pngImg/nullImg.png'
	export default {
		data() {
			return {
				nullImg: nullImg,
				AblumName: '',
				AblumId: '',
				openMessage: false,
				pictureId: null,
				Multiple: [], //当前选中的照片
				photosort: [], //相册名
				allphoto: [],
				deleteBool: true,
			}
		},
		watch: {
			//进入多选模式
			Multiple() {
				if (this.Multiple.length) {
					let iconArr = document.querySelectorAll('.iconchenggong3')
					iconArr.forEach(icon => {
						icon.style.width = "100%";
						icon.style.height = "100%"
					})
				} else {
					let iconArr = document.querySelectorAll('.iconchenggong3')
					iconArr.forEach(icon => {
						icon.style.width = "20px";
						icon.style.height = "20px"
					})
				}
			}
		},
		computed: {
			deleteMessage() {
				if (this.AblumName) {
					this.deleteBool = true;
					return '删除照片'
				} else {
					this.deleteBool = false;
					return '删除'
				}
			},
			// v-for过滤，添加照片时不出现本相册
			photosortQ() {
				return this.photosort.filter((item) => {
					return item.ablumId != this.AblumId
				})
			},
		},
		created() {
			bus.$on("loadSuccess", (file) => {
				this.getAblumName();
				this.getphotoes();
			});
			bus.$on('shareFinish', () => {
				this.getphotoes();
				this.cancelChose();
			})
		},
		activated() { //keep-alive 创建时钩子
			this.AblumName = this.$route.params.ablumName //获取相册名
			this.AblumId = this.$route.params.ablumId //获取相册ID
			this.getAblumName(); //重新渲染相册名
			this.getphotoes() //重新渲染数据
		},
		deactivated() {
			this.AblumName = '';
			this.cancelChose()
		},
		methods: {
			//日期整理
			dateCard(date) {
				let year = date.split('-')[0]
				let month = date.split('-')[1]
				let day = date.split('-')[2]
				return year + '年' + month + '月' + day + '日 ' + this.getWeek(date)
			},
			getWeek(dateString) {
				var dateArray = dateString.split("-");
				var date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
				return "星期" + "日一二三四五六".charAt(date.getDay());
			},
			getphotoes() {
				//调整样式
				let size = document.querySelector('.size');
				// if (this.AblumId == 'all') {
				// 	size.style.marginTop = '10px'
				// } else {
				// 	size.style.marginTop = '55px'
				// }
				this.$http.get('api/ablum/' + this.AblumId + '/picture').then(res => {
					let Ddata = this.$imageClass.DgetimageArr(res.data)
					this.cardingData(Ddata)
				})
			},
			getAblumName() {
				this.$http.get('/api/ablum').then(res => {
					let Ddata = this.$ablumClass.DgetAllAblum(res.data)
					this.photosort = Ddata;
				})
			},
			back() {
				this.$router.back()
			},

			//梳理格式
			cardingData(imgArr) {
				this.allphoto = [] //清空数据
				let timeArr = [];
				let photoe = {};
				imgArr.map(item => {
					let day = item.uploadTime.split('T')[0]
					if (timeArr.indexOf(day) == -1) {
						photoe[day] = []
						timeArr.push(day)
					}
					let obj = {
						url: this.$store.state.baseHttp + item.picturePath, //reducedImgPath
						bigurl: this.$store.state.baseHttp + item.picturePath,
						pictureId: item.pictureId,
						isShare: item.isShared
					}
					photoe[day].push(obj)
				})
				for (let k in photoe) {
					let obj = {}
					obj.time = k;
					obj.photoes = [];
					let srcList = [];
					photoe[k].map(item => {
						srcList.push(item.bigurl)
					})
					photoe[k].map(item => {
						let newobj = {};
						newobj.srcList = srcList;
						newobj.url = item.url;
						newobj.pictureId = item.pictureId
						newobj.isShare = item.isShare
						obj.photoes.push(newobj)
					})
					console.log(this.allphoto)
					this.allphoto.push(obj)
				}
			},
			//选择多个图片
			choseMany(pictureId) {
				this.pictureId = pictureId; //找到选中的el-img 对象
				let img = null;
				let imgArr = document.querySelectorAll('.el-image')
				for (let i = 0; i < imgArr.length; i++) {
					if (this.pictureId == imgArr[i].children[0].alt) { //获取子元素img
						img = imgArr[i]
						break;
					}
				}
				if (this.Multiple.indexOf(pictureId) == -1) { //是否被选中
					this.Multiple.push(pictureId) //1.没有被选中
					img.style.opacity = '0.6';
					img.style.transform = 'scale(0.9)';
					img.style.filter = "blur(1px)"
				} else { //2.被选中
					let index = this.Multiple.indexOf(pictureId)
					this.Multiple.splice(index, 1) //取消选中
					img.style.opacity = 1;
					img.style.transform = 'scale(1)';
					img.style.filter = "blur(0px)"
				}
			},
			sign(pictureId) { //多选标记
				return this.Multiple.indexOf(pictureId) != -1
			},
			//多选类
			signAll(urlArr) {
				let bool = true;
				urlArr.forEach(item => {
					if (this.Multiple.indexOf(item.pictureId) == -1) {
						bool = false
					}
				})
				return bool
			},
			//选择一个类
			chooseAll(urlArr) {
				// console.log(urlArr)
				if (this.signAll(urlArr)) { //判断初始状态
					urlArr.forEach(item => {
						if (this.Multiple.indexOf(item.pictureId) != -1) {
							this.choseMany(item.pictureId)
						}
					})
				} else {
					urlArr.forEach(item => {
						if (this.Multiple.indexOf(item.pictureId) == -1) {
							this.choseMany(item.pictureId)
						}
					})
				}
			},
			//取消选中
			cancelChose() {
				this.allphoto.forEach(photos => {
					let urlArr = photos.photoes
					urlArr.forEach(item => {
						if (this.Multiple.indexOf(item.pictureId) != -1) {
							this.choseMany(item.pictureId)
						}
					})
				})

			},

			deleted() {
				let Cdata = this.$imageClass.Crecycle(this.Multiple)
				console.log(Cdata)
				bus.$emit("loading")
				this.$http.patch('/api/ablum/all/picture',Cdata).then(res => {
					this.$message({
						message: '已将' + this.Multiple.length + ' 张照片从' + this.AblumName + '移除！',
						type: 'success'
					})
					this.cancelChose(); //取消选中
					this.getphotoes();
				})
			},
			download() {
				if (this.Multiple.length == 1) { //下载单张照片
					var a = document.createElement('a');
					var filename = this.Multiple[0] + '.jpg';
					a.href = this.Multiple[0];
					a.download = filename;
					a.click();
				}
			},
			//添加到相册 
			// !!!!!!!!!!!!!!!!!不能添加到当前相册
			addTo() {
				this.openMessage = true; //打开窗口
			},
			addToDown() {
				this.openMessage = false; //关闭窗口
			},
			//分享照片
			shareImage() {
				bus.$emit('shareForm',this.Multiple, 1)
				bus.$emit("loading")
			},
			//取消分享
			cancelShare() {
				bus.$emit('cancelShares',this.Multiple, 2)
				bus.$emit("loading")
			},
			addToAblum(ablum) {
				console.log(ablum)
				let Cdata = this.$imageClass.CmoveImage(this.Multiple, ablum.ablumId)
				bus.$emit("loading")
				this.$http.patch('/api/ablum/all/picture', Cdata).then(res => {
					console.log(res);
					this.$message({
						message: '已将' + this.Multiple.length + '张照片添加至 ' + ablum.name,
						type: 'success'
					})
					this.openMessage = false; //关闭窗口
					this.cancelChose() //取消选中
					this.getphotoes()
				})
			},
			imgClick() {
				console.log(123)
			},
			//添加到私密相册
			addToPrivateAblum() {
				let arr = [];
				this.Multiple.map(item => {
					arr.push(item)
				})
				let data = {
					"Method": "PRIVATE",
					"PicturesId": arr
				}
				bus.$emit("loading")
				this.$http.patch('/api/ablum/all/picture', data).then(res => {
					this.$message({
						type: 'success',
						message: '已将' + this.Multiple.length + '张图片添加至 私密相册！'
					})
					this.getphotoes() //重新加载数据
					this.openMessage = false; //关闭窗口
					this.cancelChose() //取消选中
				})

			},
			deletes() {
				this.$confirm('是否将图片删除至回收站', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleted()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	}
</script>

<style scoped="scoped">
	.el-icon-picture-outline {
		position: absolute;
		font-size: 50px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #C9C9C9;
	}

	.topUl span {
		font-size: 14px;
		vertical-align: top;
	}

	.topUl i {
		font-size: 22px;
	}

	.shareSign {
		position: absolute;
		display: inline-block;
		bottom: 20px;
		right: 10px;
		z-index: 5;
		font-size: 14px;
		color: #FFFFFF;
		font-family: "PingFang SC";
		background-color: rgba(0, 0, 0, .3);
		border-radius: 3px;
		padding: 0 3px;
	}

	.iconquxiao1 {
		font-size: 20px;
	}

	.AblumName {
		font-size: 20px;
		position: absolute;
		top: 0;
		left: 60px;
		line-height: 50px;
	}

	.size {
		margin-top: 55px;
		min-height: 658px;
		min-width: 99%;
		/* background-color: #e9eef3; */
	}

	.iconfanhui {
		position: absolute;
		left: 0;
		top: 10px;
		font-size: 30px;
		cursor: pointer;
		left: 15px;
	}

	.top {
		position: absolute;
		width: 100%;
		height: 50px;
		background-color: #f1f6fa;
	}

	.iconquxiao1 {
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}

	.iconquxiao1:hover {
		color: #7e8bff;
	}

	.hiddenBlack::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		z-index: 99;
		opacity: .4;
	}

	.addTo {
		position: absolute;
		left: 37%;
		top: 50%;
		padding: 20px;
		transform: translate(-50%, -50%);
		background-color: #ebebeb;
		border-radius: 10px;
		z-index: 999;
	}

	.addTo ul {
		width: 400px;
		height: 500px;
		overflow: auto;
		padding-top: 40px;
	}

	.addTo img {
		width: 50px;
		height: 50px;
		border: 2px solid #959c9d;
		border-radius: 5px;
		vertical-align: middle;
		line-height: 70px;
	}

	.addTo li {
		height: 70px;
		width: 100%;
		margin-bottom: 10px;
		background-color: #e1e1e1;
		padding-left: 20px;
		box-sizing: border-box;
		box-shadow: -2px 9px 7px -5px #cacaca;
		border-radius: 10px;
		cursor: pointer;
	}

	.addTo span {
		vertical-align: middle;
		margin-left: 22%;
		line-height: 70px;
		color: #5f5f5f;
		font-size: 18px;
	}

	.footer>ul li {
		float: left;
		width: auto;
		line-height: 60px;
		margin-left: 40px;
		color: white;
		font-size: 16px;
		cursor: pointer;
	}

	.footer>ul li:hover {
		color: #4cff58;
	}

	.footer>ul {
		position: absolute;
		right: 60px;
	}

	.footer>ul li span {
		margin-left: 5px;
	}

	/* 选中一类 */
	.block:hover .iconchenggong {
		opacity: 1;
	}

	.iconchenggong {
		font: 30px;
		top: 50px;
	}

	.iconchenggong {
		position: absolute;
		top: 20px;
		right: 30px;
		bottom: calc(50%-15px);
		font-size: 30px;
		color: #8f9385;
		cursor: pointer;
		opacity: 0;
		transition: 0.3s;
	}

	.footer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #0a85f8;
		z-index: 9;
		height: 0;
		overflow: hidden;
		transition: .5s;
		opacity: 0;
	}

	.footer>span {
		color: white;
		line-height: 60px;
		margin-left: 50px;
		font-size: 20px;
		font-weight: 600;
	}

	.eject {
		height: 60px;
		opacity: 1;
	}

	.pushFont {
		display: inline-block;
		position: relative;
	}

	.el-image {
		overflow: hidden;
		height: 200px;
		min-width: 100px;
		max-width: 400px;
		margin-left: 10px;
		margin-bottom: 10px;
		transition: 0.5s;
		box-shadow: 0px 16px 26px -15px #b4b4b4;
		opacity: 1;
		z-index: 2;
		border-radius: 10px;
	}

	/* 图片动画 */

	.block>>>.el-image__inner {
		width: auto !important;
	}

	.demo-image {
		position: relative;
		text-align: left;
		overflow: hidden;
		margin-top: 60px;
		height: calc(100% - 60px);
		width: 100%;
	}

	.text {
		margin-bottom: 20px;
		color: #737373;
	}

	.block {
		position: relative;
		box-sizing: border-box;
		padding: 40px;
		padding-bottom: 0;
		width: 100%;
	}


	/* 多选图标 */

	.iconchenggong3 {
		cursor: pointer;
		position: absolute;
		display: block;
		width: 20px;
		height: 20px;
		top: 10px;
		left: 20px;
		color: #acacac;
		opacity: 0;
		font-size: 30px;
		z-index: 3;
		transition: 0.5s;
	}

	.pushFont:hover .iconchenggong3 {
		opacity: 1;
	}

	.changeColor {
		color: #13CE66;
		opacity: 1;
	}
</style>
